<!-- ad-or-updata -->
<template>
	<div class="ad-or-updata-page">
		<el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="closeDialog">
			<el-form :model="form" :rules="rules" ref="ruleForm">
				<el-form-item label="名字" :label-width="formLabelWidth" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="年龄" :label-width="formLabelWidth" prop="age"><el-input v-model="form.age"></el-input></el-form-item>
				<el-form-item label="地址" :label-width="formLabelWidth" prop="address"><el-input v-model="form.address"></el-input></el-form-item>
				<el-form-item label="手机" :label-width="formLabelWidth" prop="iphone"><el-input v-model="form.iphone"></el-input></el-form-item>
				<el-form-item label="身份证" :label-width="formLabelWidth" prop="idCard"><el-input v-model="form.idCard"></el-input></el-form-item>
				<el-form-item label="是否独生" :label-width="formLabelWidth">
					<el-radio v-model="form.isAlone" :label="0">独生子女</el-radio>
					<el-radio v-model="form.isAlone" :label="1">非独生</el-radio>
				</el-form-item>
				<el-form-item label="是否接种" :label-width="formLabelWidth">
					<el-radio v-model="form.inoculation" :label="0">未接种</el-radio>
					<el-radio v-model="form.inoculation" :label="1">已接种</el-radio>
				</el-form-item>
				<el-form-item label="户口所在地" :label-width="formLabelWidth" prop="account">
					<el-select v-model="form.account" placeholder="户口所在地">
						<el-option label="农村户口" :value="0"></el-option>
						<el-option label="城市户口" :value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
	name: 'ad-or-updata-page',
	data() {
		return {
			msg: 'ad-or-updata',
			dialogFormVisible: false,
			form: {
				inoculation: 0,
				isAlone: 0
			},
			title: '新增学生',
			formLabelWidth: '120px',
			rules: {
				name: [
					{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}
				],
				age: [
					{
						required: true,
						message: '请输入年龄',
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}
				],
				iphone: [
					{
						required: true,
						message: '请输入手机',
						trigger: 'blur'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确的手机号码',
						trigger: 'blur'
					}
				],
				idCard: [
					{
						required: true,
						message: '请输入身份证',
						trigger: 'blur'
					},
					{
						pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						message: '请输入正确的身份证',
						trigger: 'blur'
					}
				],
				account: [
					{
						required: true,
						message: '请选择户口',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		...mapMutations(['addTableData','updateTableDate']),
		open(row) {
			if(row){
				this.title = '编辑学生'
				this.form = Object.assign({},row)
			}
			this.dialogFormVisible = true;
		},
		closeDialog() {
			this.$emit('myClose');
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let params = Object.assign({},this.form)
					this[params.id?'updateTableDate':'addTableData'](params)
					this.dialogFormVisible = false
					
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>
<style scoped></style>
